<!--
 * @Author: early-autumn
 * @Date: 2020-05-16 11:45:04
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-05 14:32:15
-->
<template>
  <el-dialog
    title="交易记录"
    width="1080px"
    :visible="value"
    @close="handleValueChange"
  >
    <transaction-title :patient="patient" :vip-info="vipInfo" />
    <el-table v-loading="loading" stripe :data="list">
      <!-- <el-table-column label="客户姓名"></el-table-column>
      <el-table-column label="手机号"></el-table-column>
      <el-table-column label="TC"></el-table-column>
      <el-table-column label="操作方式"></el-table-column>
      <el-table-column label="缴费方式"></el-table-column>
      <el-table-column label="转账人"></el-table-column>
      <el-table-column label="收费人"></el-table-column>
      <el-table-column label="收费人"></el-table-column>
      <el-table-column label="备注"></el-table-column> -->
      <el-table-column label="缴费" align="center" prop="consumptionAmount" />
      <el-table-column label="操作人" align="center" prop="createBy" />
      <el-table-column label="操作门诊" align="center" prop="createClinic" />
      <el-table-column label="缴费时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handlePrintPanel(scope.row)"
            >打印</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button @click="handleValueChange">关 闭</el-button>
    </div>
    <print-panel
      v-model="printPanelVisible"
      path="/print/PayChange"
      :data="printItem"
      width="1000px"
    >
    </print-panel>
  </el-dialog>
</template>

<script>
import { getHistory } from '@/api/erp/vipConsumeHistory'
import PrintPanel from '@/components/yiya/PrintPanel'
import TransactionTitle from '../TransactionTitle'

export default {
  name: 'TransactionRecord',
  components: {
    PrintPanel,
    TransactionTitle,
  },
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    vipInfo: {
      type: Object,
      default: () => {},
    },
    patient: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      list: [],
      total: 0,
      loading: true,
      printItem: {},
      printPanelVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'createTime',
        isAsc: 'desc',
      },
    }
  },
  watch: {
    value(val) {
      if (val) this.getHistoryList()
    },
  },
  methods: {
    handlePrintPanel(item) {
      this.printItem = {...this.patient, ...item}
      this.printPanelVisible = true
    },
    async getHistoryList() {
      this.loading = true
      const { rows, total } = await getHistory(this.vipInfo.yiyaClinicPersonId)
      this.total = total
      this.list = rows
      this.loading = false
    },
    handleValueChange() {
      this.$emit('change', false)
    },
  },
}
</script>

<style></style>
